/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input,Tooltip,Icon} from 'antd';
import {connect} from 'dva';
import styles from './password.less'
const FormItem = Form.Item;
class EditPassword extends Component {
  constructor(props) {
    super(props);
    this.state = {
      level:0,
    };
  }
  changePassword=(e)=> {
    let value=e.target.value
    let level = 0;
    //正则表达式验证符合要求的
    if(/\d/.test(value)) level++; //数字
    if(/[A-Z]/.test(value)) level++; //小写
    if(/[a-z]/.test(value)) level++; //特殊字符
    if(value.length < 8||value.length > 16)  level=0;
    //逻辑处理
    this.setState({
      level:level
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };
    const {getFieldDecorator,} = this.props.form;
    return (
      <div>
      <Form onSubmit={this.handleSubmit}>
        <FormItem
          {...formItemLayoutWithLabel}
          label="旧密码"
        >
          {getFieldDecorator('old_password', {
          })(
            <Input  type='password'/>
          )}
        </FormItem>
        <FormItem
          label={
            <span>新密码  <Tooltip title="密码必须包含数字、小写字母、大写字母各1个，长度为8-16，非空白字符"><Icon type="exclamation-circle" /></Tooltip></span>
          }
          {...formItemLayoutWithLabel}
        >
          {getFieldDecorator('new_password', {
          })(
            <Input  type='password' onChange={this.changePassword}/>
          )}
        </FormItem>
        <FormItem
          label="密码强度(必须为强)"
          {...formItemLayoutWithLabel}
        >
          <div className={styles.strength_box}>
            <div className={styles.one} style={{background:this.state.level>=1?'#F5222D':'#cccccc'}}>
              <span></span>
              <p>弱</p>
            </div>
            <div className={styles.two} style={{background:this.state.level>=2?'#FAAD14':'#cccccc'}}>
              <span></span>
              <p>中</p>
            </div>
            <div className={styles.three} style={{background:this.state.level>=3?'#52C41A':'#cccccc'}}>
              <span></span>
              <p>强</p>
            </div>
          </div>
        </FormItem>
        <FormItem
          label="重复密码"
          {...formItemLayoutWithLabel}
        >
          {getFieldDecorator('new_password_confirmation', {
          })(
            <Input type='password'/>
          )}
        </FormItem>
      </Form>
    </div>
    );
  }
}

const EditPasswordFormWrap = Form.create()(EditPassword);
export default connect()(EditPasswordFormWrap);
